<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs [items]="['算法管理','物资车标定参数']" icon="fa fa-subscript"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
          <h2>物资车标定参数</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <sa-company-tree-car companyTreeId="companyTree"
                  (companySelected)="companySelected($event)"></sa-company-tree-car>
                <div class="selectDate top_module">
                  <table-select-date [notInit]='true' (outerTime)="getSelectTableTime($event)"></table-select-date>
                </div>
                <button class="btn btn-primary" (click)="table_search()">查询</button>
                <button type="button" class="btn btn-primary" (click)="showImportModal(csvModal)">csv文件上传</button>
                <!--<button class="btn btn-primary" (click)="table_clear()">清空</button>-->
              </div>
              <div class="right top-search">
                <input type="text" [(ngModel)]="searchKey" (change)="table_search()" class="search-input"
                  placeholder="公司、车牌号、设备ID...">
                <span class="top-search-box">
                  <button class="top-search-btn" type="button" (click)="table_search()"> <i
                      class="fa fa-search"></i></button>
                </span>
              </div>
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                <thead>
                  <tr>
                    <th>设备编码</th>
                    <th>车牌号码</th>
                    <th>公司名称</th>
                    <th>AD值</th>
                    <th>磅单</th>
                    <th>创建时间</th>
                    <th>更新时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData; let i = index" [attr.data-index]="i">
                    <td>{{row.deviceId}}</td>
                    <td>{{row.carNumber}}</td>
                    <td>{{row.companyName}}</td>
                    <td>
                      <button *ngIf='row.ads && row.ads.length' type="button"
                        (click)="showAdsModal(row,adsModal)">查看</button>
                    </td>
                    <td>
                      {{row.weight && row.weight.length? row.weight.join(','):'--'}}
                    </td>
                    <td>{{row.createTime}}</td>
                    <td>{{row.updateTime}}</td>
                    <td>
                      <button type="button" (click)="delete_row(row)">删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator [totalRecords]="totalCount" [rows]="pageSize" [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)">
              </paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()"><i
                  class="fa fa-refresh"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>

  <!-- ads详情 -->
  <div bsModal #adsModal="bs-modal" id="adsModal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 1000px;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="cancelAdsModal(adsModal)" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">AD值详情</h4>
        </div>
        <div class="modal-body" style="padding: 15px 15px 30px 15px">
          <div class="table_scroll">
            <table
              class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
              <thead>
                <tr>
                  <th *ngFor="let row of adsTableData[0]; let i = index">通道{{i+1}}</th>
                </tr>
              </thead>
              <tbody>

                <tr *ngFor="let row of adsTableData">
                  <td *ngFor="let item of row">{{item}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ads详情 end-->

  <!-- csv文件上传弹框 -->
  <div bsModal #csvModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <form id="pathCorrectionFrom" name="pathCorrection" (ngSubmit)="onSubmit()" class="form-horizontal"
          novalidate="novalidate">
          <div class="modal-header">
            <button type="button" class="close" (click)="cancelCsvModal(csvModal)" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">CSV文件上传</h4>
          </div>
          <div class="modal-body">

            <div class="row uploadWarp">

              <div class="form-group" style="margin: 0;">
                <label class="control-label col-sm-2 no-padding-right" for="imgFile">csv文件</label>
                <div class="col-sm-10 no-padding">
                  <div class="clearfix">
                    <input class="form-control fileInp" (change)="fileChange($event.target.files)" name="fileToUpload"
                      type="file" accept=".csv" placeholder="csv文件..." />
                    <div class="inpWarp">{{fileName}}</div>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="cancelCsvModal(csvModal)">取消</button>
            <button type="submit" class="btn btn-primary">上传</button>
          </div>
        </form>

      </div>
    </div>
  </div>
  <!-- csv文件上传弹框 结束 -->
</div>

<style type="text/css">
  .uploadWarp {
    background: #fff;
    border-radius: 4px;
    padding-bottom: 30px;
  }

  .clearfix {
    position: relative;
  }

  .fileInp {
    position: absolute;
    opacity: 0;
  }

  .inpWarp {
    height: 32px;
    line-height: 32px;
    background: #fff;
    padding: 0 12px;
    border: 1px solid #ccc;
  }
</style>